<template>
	<view class="cu-bar tabbar   foot" >
		<view class="action" @click="to(i)" v-for="(item,i) in list" :key='i'>
			<view class="cuIcon-cu-image">
				<image :src="'/static/images/tabbar/'+(item.isActive?item.activeimg:item.img)+'.png'"></image>
			</view>
			<view :class="item.isActive?'text-olive':'text-white'">{{item.title}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			indexId:{
				type:Number,
				default:0
			}
		},
		name:"tabbar",
		watch:{
			//深度监听
			indexId: {
			        handler(newName, oldName) {
			            console.log(newName)
						this.list.forEach((v,i)=>{
							i==newName?v.isActive=true:v.isActive=false
						})
			        },
			        immediate: true,
			        deep: true
			    }
			
		},
		
		data() {
			return {
				list:[
					{title:'记账簿',isActive:true,img:'bookkeeping',activeimg:'bookkeeping-active'},
					{title:'统计',isActive:false,img:'statistics',activeimg:'statistics-active'},
					{title:'明细',isActive:false,img:'detailed',activeimg:'detailed-active'},
					{title:'我的',isActive:false,img:'user',activeimg:'user-active'},
				]
			};
		},
		onLoad() {
			
			
		},
		methods:{
			to(index){
				
				var urls='';
					switch (index){
						case 0:
						urls='/pages/app/bookkeeping/bookkeeping'
							break;
						case 1:
						urls='/pages/app/statistics/statistics'
							break;
						case 2:
						urls='/pages/app/detailed/detailed'
							break;
						case 3:
						urls='/pages/user/index'
							break;
						default:
							break;
					}
					uni.switchTab({
						url:urls,
						complete: (res) => {
							console.log(res);
							urls=''
						}
					})
				
			},
			
		}
	}
</script>

<style lang="scss">

</style>
